<template>
  <div class="menuForm">
    <el-drawer
      :title="title"
      :visible.sync="visible"
      direction="rtl"
      custom-class="demo-drawer"
      :before-close="closeModal"
    >
      <el-form ref="forms" label-width="80px" :model="param" :rules="rules" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="param.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid">
          <select_tree ref="trees" v-model="param.pid" :tree="menuTree" :list="menus" :selectedTree="selectedTree"
                       placeholder="请选择上级菜单" size="small"/>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="param.type">
            <el-radio :label="1"><span>资源</span></el-radio>
            <el-radio :label="0"><span>菜单</span></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" >
          <d2-icon-select v-model="param.icon" placeholder="请选择图标"/>
        </el-form-item>
        <el-form-item label="路径" v-if="param.type===0">
          <el-input v-model="param.path" placeholder="请输入菜单路径" @change="pathChange"></el-input>
        </el-form-item>
        <el-form-item label="路由" v-if="param.type===0">
          <el-input v-model="param.router" placeholder="请输入菜单路由"></el-input>
        </el-form-item>
        <el-form-item label="资源标识" v-if="param.type===1">
          <el-input v-model="param.permissions" placeholder="请输入资源标识"></el-input>
        </el-form-item>
        <el-form-item label="绑定接口" v-if="param.type===1">
<!--          <el-input v-model="param.url" placeholder="请输入绑定接口"></el-input>-->
          <el-select v-model="param.url" filterable placeholder="请选择绑定接口" clearable>
            <el-option v-for="item in urls" :key="item.methodPath" :label="`${item.remarks},${item.methodPath}`" :value="item.methodPath">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="param.sort" :min="1" :max="100000"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="param.state">
            <el-radio :label="1"><span>启用</span></el-radio>
            <el-radio :label="0"><span>禁用</span></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="closeModal" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import select_tree from '@/views/components/select-tree'
import util from '@/libs/util'
import { menuCreate, menuUpdate, interfaceAll } from '@/api/system/menu'

export default {
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    menus: { type: Array, default: [] },
    // eslint-disable-next-line vue/require-valid-default-prop
    menuTree: { type: Array, default: [] },
    initList: { type: Function }
  },
  components: {
    select_tree
  },

  data () {
    return {
      visible: false,
      title: '新增',
      treeSelected: {},
      handleType: 'create',
      loading: false,
      urls: [],
      param: {
        id: '',
        name: '',
        pid: '',
        path: '',
        router: '',
        type: '',
        state: 0,
        permissions: '',
        url: '',
        sort: 1,
        icon: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
        state: [{ required: true, message: '该菜单是否启用', trigger: 'change' }],
        type: [{ required: true, message: '类型必选', trigger: 'change' }]
      }
    }
  },
  watch: {},
  created () {

  },
  methods: {
    submitForm () {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          this.loading = true
          this.param.type === 0 && delete this.param.permissions && delete this.param.url
          this.param.type === 1 && delete this.param.path && delete this.param.router && delete this.param.icon
          this.handleType === 'create' && this.add()
          this.handleType === 'update' && this.update()
        }
      })
    },
    add () {
      util.request(this, menuCreate, this.param, this.initList, '添加菜单成功')
    },
    update () {
      util.request(this, menuUpdate, this.param, this.initList, '修改菜单成功')
    },
    getUrl () {
      util.query(this, interfaceAll, undefined, 'urls')
    },
    closeModal () {
      this.visible = false
      this.resetForms()
      this.$refs.forms.resetFields()
    },
    openModal (param) {
      this.handleType = (param && 'update') || 'create'
      param && this.resetForms(param)
      this.title = param ? '编辑菜单/资源' : '添加菜单/资源'
      this.visible = true
      this.getUrl()
    },
    resetForms (param) {
      this.param = {
        id: (param && param.id) || '',
        name: (param && param.name) || '',
        pid: (param && param.pid) || '',
        path: (param && param.path) || '',
        router: (param && param.router) || '',
        type: (param && param.type) || 0,
        state: (param && param.state) || 0,
        permissions: (param && param.permissions) || '',
        url: (param && param.url) || '',
        sort: (param && param.sort) || 1,
        icon: (param && param.icon) || ''
      }
    },
    pathChange (e) {
      const parent = this.treeSelected
      this.param.router = (parent && parent.path && `${parent.path}/${e}`) || e
    },
    selectedTree (e) {
      this.treeSelected = e
    }
  }
}
</script>

<style scoped>
  .menuForm >>> .el-dialog {
    border-radius: 8px;
  }

  .menuForm >>> .el-input {
    width: 80%;
  }

  .menuForm >>> .el-textarea__inner {
    width: 80%;
  }

  .menuForm >>> .el-select {
    width: 80%;
  }

  .menuForm >>> .el-dialog__body {
    padding: 10px 0 0 20px;
  }

  .menuForm >>> .el-dialog__footer {
    padding: 0 30px 20px;
  }

  .menuForm >>> .el-dialog__header {
    padding: 20px 30px 10px;
  }

  .menuForm >>> .demo-drawer__footer {
    float: right;
    padding-right: 20px;
  }

</style>
